<template>
    <div class="userLike">
         <div class="back-nav-box">
            <back-nav title="我的收藏" left-text="返回" left-arrow @navback='navback'></back-nav>
        </div>
        <!-- 蓝色底 -->
        <div class="blue-box"></div>

            <!-- 收藏结果渲染 -->
            <div class="searchResult">
                <div class="result-box" v-for="(item,index) in UserAlllike" :key="index">
                    <div class="result-img"><img :src="item.smallImg" alt=""></div>
                    <div class="zhname">{{item.name}}</div>
                    <div class="enname">{{item.enname}}</div>
                    <div class="result-price">&yen;{{item.price}}</div>
                    <div class="res-icon" @click="cancelLike(item.pid)"><van-icon name="delete-o" /></div>
                </div>
            </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import BackNav from '../components/BackNav.vue'
    export default {
        data() {
            return {
                UserAlllike:[]
            }
        },
        components:{BackNav},
        created() {
            this.findUlike();
        },
        methods: {
            // 取消收藏
            cancelLike(pid){
                // vant弹窗
                Dialog.confirm({
                    message: '确认删除该商品吗',
                    })
                    .then(() => {
                        // on confirm
                         this.axios({
                    method:'post',
                    url:'/notlike',
                    data:{
                        pid
                    }
                }).then(res=>{
                    console.log('取消收藏res=>',res);
                    this.findUlike()//重新渲染页面
                }).catch(err=>{
                    console.log('err',err);
                })
                    })
                    .catch(() => {
                        // on cancel
                });

                
            },
             // 返回
            navback(){
                this.$router.go(-1)
            },
            // 
            findUlike(){
                this.axios({
                    method:'get',
                    url:'/findAllLike',
                }).then(res=>{
                    console.log('我的收藏res=>',res);
                    this.UserAlllike=res.data.result
                }).catch(err=>{
                    console.log('err',err);
                })
            }
        },
    }
</script>

<style lang="less" scoped>
.searchResult{
    width: 355px;
    // min-height: 40px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    top:160px;
    left: 10px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .result-box{
        width: 30%;
        margin-bottom: 10px;
        position: relative;
        // icon图标
        .res-icon{
            position: absolute;
            bottom: -5px;
            right: 5px;
            color: #666;
        }
        // 图片
        .result-img{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .zhname{
            font-size: 16px;
            color: #666;
            margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .enname{
            font-size: 14px;
            color: #999;
            // margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .result-price{
            font-size: 14px;
            font-weight: bold;
            margin-top: 10px;
            color: #0c34ba;
        }
    }
}

.back-nav-box{
        z-index: 9;
        position: sticky;
        top: 0;
    }
    // 蓝色底
    .blue-box{
        width: 100%;
        height: 150px;
        background-color: #0c34ba;
    }

.userLike{
    min-height: 100vh;
    background-color: #f7f7f7;
}
</style>